<template>
  <div class="echarts-box">
    <div class="echarts-title">
      <span class="title-name">{{ titleName }}</span>
      <img src="~@/assets/images/bg-sub-title.png" class="title-bg" />
    </div>
    <echartCompt class="echarts" v-model="chartOption"></echartCompt>
  </div>
</template>

<script>
import * as echartOption from "@/components/echart-axis";
export default {
  props: {
    titleName: {
      type: String,
      default: "标题",
    },
    EchartData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  computed: {
    chartOption() {
      let _this = this;
      let barWidth = 24;
      var xdata = [];
      let data1 = [];
      let data2 = [];
      if (this.EchartData.length) {
        let echartdata = this.EchartData;
        echartdata.map((item) => {
          xdata.push(item.xData);
          data1.push(item.bqData);
          data2.push(item.tqData);
        });
      }

      const option = {
        legend: echartOption.echartLegend(["本期", "同期"], 0),
        tooltip: echartOption.tooltip(),
        grid: echartOption.echartGrid({
          right: 60,
        }),
        xAxis: {
          type: "category",
          data: xdata,
          axisTick: echartOption.xAxisTick,
          axisLine: echartOption.xAxisline,
          axisLabel: echartOption.xAxisLabel(),
          boundaryGap: true,
        },
        yAxis: {
          axisTick: echartOption.yAxisTick,
          axisLine: echartOption.yAxisline,
          splitLine: echartOption.splitLine,
          axisLabel: echartOption.yAxisLabel,
        },
        series: [
          {
            type: "bar",
            name: "本期",
            data: data1,
            barWidth: barWidth,
            itemStyle: {
              normal: {
                barBorderRadius: [barWidth / 3, barWidth / 3, 0, 0],
                color: new _this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(251, 169, 128, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(246, 202, 107, 1)",
                  },
                ]),
              },
            },
          },
          {
            type: "bar",
            name: "同期",
            data: data2,
            barWidth: barWidth,
            itemStyle: {
              normal: {
                barBorderRadius: [barWidth / 3, barWidth / 3, 0, 0],
                color: new _this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(13, 230, 254, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(79, 172, 254, 1)",
                  },
                ]),
              },
            },
          },
        ],
      };
      Object.assign(option.yAxis, echartOption.yAxisDw("单位：户"));
      return option;
    },
  },
};
</script>

<style>
.echarts-box {
  width: 100%;
  height: 100%;
}
.echarts-title {
  position: relative;
  width: calc(100% - 80px);
  height: 15%;
  text-align: left;
  margin-left: 80px;
}
.title-name {
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}
.title-bg {
  position: absolute;
  width: 160px;
  height: 12px;
  left: -30px;
  top: 32px;
}
.echarts {
  width: 100%;
  height: 85%;
}
</style>